<template>
  <div>
    <div style="overflow:scroll;border-bottom: 1px solid black; margin-bottom: 10px;overflow-x: hidden; overflow-y: auto;height: 400px;">
      <el-tree style="max-width: 600px;" :data="data" show-checkbox node-key="id"
        :default-checked-keys="menuids" :props="defaultProps" ref="permListRef" />
    </div>
    <ElButton @click="submit" type="primary" >提交</ElButton>
    <ElButton @click="menuref">重置</ElButton>
  </div>
</template>

<script setup lang="ts">
import menuapi from '@/api/menuapi';
import rolemenuapi from '@/api/rolemenuapi';
import { ElButton, ElMessage, ElTree } from 'element-plus';
import { onMounted, Ref, ref } from 'vue';

const prop = defineProps({
  RoleId: Number
})
const emits = defineEmits(['onSave']);
const data = ref()
const menuids = ref()
const permListRef: Ref = ref(null);
const defaultProps = {
  children: 'children',
  label: 'label',
}

const submit = () => {
  const value = permListRef.value.getCheckedKeys(true)
  let obj:object = {RoleId:prop.RoleId , MenuIds:value};
  console.log("obj=",obj)
  rolemenuapi.batch(obj).then(res=>{
    if (res.code > 0) {
            ElMessage({
                message :"授权成功",
                type:'success',				
				onClose: () => {
				emits("onSave" , "auth")
				}
            })
			
        }else{
            ElMessage({
                message :"授权失败",
                type:"error"
            })
        }
    }).catch(err=>{
        console.log(err)
    })
}
/**
 * 重置
 */
const menuref = () => {

  permListRef.value.setCheckedKeys(menuids.value)
}
const gettree = () => {
  menuapi.Tree({}).then(res => {
	  console.log("data.value=",res.data)
    data.value = res.data;
    getmenuids();
  }).catch(err => {
    console.log(err)
  })
}

const getmenuids = () => {
  rolemenuapi.rolemenus({ RoleId: prop.RoleId }).then(res => {
	  console.log("menuid.value=",res.data)
    menuids.value = res.data
  }).catch(err => {
    console.log(err)
  })
}

onMounted(() => {
  gettree()
})

</script>

<style scoped></style>
